import React, { useState } from 'react';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; // 导入 Ant Design 图标

const PhoneNumberCell = ({ phone, onShowFullPhone }) => {
  const [showFullPhone, setShowFullPhone] = useState(false);

  const handlePhoneClick = () => {
    setShowFullPhone(!showFullPhone);
    onShowFullPhone(); // 可以在这里执行其他操作，比如记录日志
  };

  const displayPhone = showFullPhone ? phone : `${phone.slice(0, 3)}****${phone.slice(-4)}`;

  return (
    <div onClick={handlePhoneClick} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center',width:'100px' }}>
      
      <span style={{ marginLeft: 5 }}>
        {showFullPhone ? <EyeInvisibleOutlined /> : <EyeTwoTone />}
      </span>
      {displayPhone}
    </div>
  );
};

export default PhoneNumberCell;